<%--
  Created by IntelliJ IDEA.
  User: baiyu
  Date: 2021/11/13
  Time: 4:49 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学习 + 测试</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script>

        function testButton() {
            const url = document.getElementById("url").value;
            const a = document.getElementById('testIframe');
            a.src = url;
        }

        function testAjax() {
            var a = document.getElementById("testAjax").value;
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/test/testAjax",
                data: {
                    "message": a
                },
                // dataType:"text",
                success: function (data, status) {
                    console.log(status); // 状态
                    alert(data);
                },
                error: function () {
                    alert("报错了");
                }
            })
        }

        $(function () {
            $('#btn').click(function () {
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/test/testList",
                    dataType: "json",
                    data: {},
                    success: function (data, status) {
                        console.log(status);
                        console.log(data);
                        var htm = "";
                        for (let i = 0; i < data.length; i++) {
                            htm += "<tr>"
                                + "<td>" + data[i].ip + ":" + data[i].port + "</td>"
                                + "<td>" + data[i].name + "</td>"
                                + "<td>" + data[i].information + "</td>"
                                + "</tr>"
                        }
                        $("#content").html(htm);
                    },
                    error: function () {
                        alert("报错了");
                    }
                })
            })

        })

        $(function (){
            $("#inDb").click(function (){
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/test/DB",
                    dataType: "json",
                    data: {},
                    success:function (date){
                        alert(date)
                    },
                    error:function (){
                        alert("报错了")
                    }
                })
            })
        })

    </script>
</head>
<body>
<div>
    <h1>hello Test</h1>
</div>
<div>
    <input type="text" id="testAjax" value="hello">
    <input type="button" value="提交" onclick="testAjax()">
</div>
<hr/>
<%--<div>--%>
<%--    <p>地址</p>--%>
<%--    <p>--%>
<%--        <input type="text" id="url" value="https://cn.pornhub.com/video/search?search=pormhub">--%>
<%--        <input type="button" value="提交" onclick="testButton()">--%>
<%--    </p>--%>
<%--    <iframe id="testIframe" src="https://www.baidu.com/" frameborder="0" style="width: 100%;height: 500px"></iframe>--%>
<%--</div>--%>
<div>
    <input type="button" value="获取数据" id="btn">
    <table>
        <tr>
            <td>地址&nbsp</td>
            <td>名称</td>
            <td>信息</td>
        </tr>
        <tbody id="content">
        </tbody>
    </table>
</div>
</hr>
<div>
    <input type="button" value="开始生成数据" id = "inDb">
</div>
</body>
</html>
